/** 
  计算机等级考试-名单规则设置-增补名单
*/
<template>
  <div class="list-setting">
    <div v-show="activeName === 'studentListing'">
      <condition-card @reset="reset" @search="onSubmit" label-position="right" label-width="150px">
        <el-row :gutter="24" style="height: 50px;">
          <el-col :span="8">
            <el-form-item :label="$t('mandarin.schoolStatus')">
              <el-select v-model="studentQueryForm.condition.leaveSchoolList" multiple clearable style="width: 100%">
                <el-option
                  v-for="item in options.leaveSchool"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('mandarin.studentStatus')">
              <el-select v-model="studentQueryForm.condition.registrationStatusList" multiple clearable style="width: 100%">
                <el-option
                  v-for="item in options.registrationStatus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('mandarin.inSchoolMethod')">
              <el-select v-model="studentQueryForm.condition.enrolMethodsList" multiple clearable style="width: 100%">
                <el-option
                  v-for="item in options.enrolMethods"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('englishScoreManage.gradeSchool')">
              <el-select v-model="studentQueryForm.condition.gradeList" clearable multiple style="width: 100%">
                <el-option
                  v-for="item in options.gradeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </condition-card>
    </div>
    <div v-show="activeName === 'choosedListing'">
      <condition-card @reset="reset" @search="onSubmit" label-position="right" label-width="150px">
        <el-row :gutter="24" style="height: 50px;">
          <el-col :span="8">
            <el-form-item :label="$t('mandarin.schoolStatus')">
              <el-select v-model="choosedQueryForm.condition.leaveSchool"  clearable style="width: 100%">
                <el-option
                  v-for="item in options.leaveSchool"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('mandarin.studentStatus')">
              <el-select v-model="choosedQueryForm.condition.registrationStatus" clearable style="width: 100%">
                <el-option
                  v-for="item in options.registrationStatus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('mandarin.inSchoolMethod')">
              <el-select v-model="choosedQueryForm.condition.enrolMethods" clearable style="width: 100%">
                <el-option
                  v-for="item in options.enrolMethods"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('englishScoreManage.gradeSchool')">
              <el-select v-model="choosedQueryForm.condition.gradeList" clearable multiple style="width: 100%">
                <el-option
                  v-for="item in options.gradeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </condition-card>
    </div>
    <el-card shadow="never" v-loading="loading" body-style="padding: 24px;" style="margin-top: 16px;">
      <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane :label="$t('mandarin.studentListing')" name="studentListing">
            <div class="edu-opertion-bar sub-title">
              <div class="float-left">
                <el-input
                  v-model.trim="studentQueryForm.condition.name"
                  :placeholder="$t('subjectCompetitionBase.studentIdOrName')"
                  style="width:250px"
                  @keyup.enter.native="onSubmit">
                    <i slot="suffix"
                      class="el-icon-search"
                      style="margin-top:10px;cursor:pointer"
                      @click="onSubmit">
                    </i>
                </el-input>
              </div>
              <div class="float-right" style="display: flex;">
                <el-button v-if="permitToAdd && multiStuList.length > 0" @click="addListing()">{{$t('subjectCompetitionBase.add')}}</el-button>
              </div>
            </div>
            <self-edu-table ref="studentTable" :pagination="false" :order='true' :tooltipEffect="tooltipEffect" :getRowKey="getRowKey" stripe :data="stuListingData" size="mini" @selection-change="changeStuList">
              <edu-table-column :label="$t('subjectCompetitionBase.studentId')" prop="studentId"></edu-table-column>
              <edu-table-column :label="$t('subjectCompetitionBase.name')" prop="name"></edu-table-column>
              <edu-table-column :label="$t('subjectCompetitionBase.sex')" prop="sexI18n"></edu-table-column>
              <edu-table-column :label="$t('subjectCompetitionBase.college')" prop="facultyI18n"></edu-table-column>
              <edu-table-column :label="$t('mandarin.schoolStatus')" prop="leaveSchoolI18n"></edu-table-column>
              <edu-table-column :label="$t('mandarin.studentStatus')" prop="registrationStatusI18n"></edu-table-column>
            </self-edu-table>
            <el-row type="flex" class="row-bg" justify="end">
              <el-col>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="studentQueryForm.pageNum_"
                  :page-sizes="[20, 40, 80, 100]"
                  :page-size="studentQueryForm.pageSize_"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="studentQueryForm.total_"
                  style="float:right;margin-top:10px"
                ></el-pagination>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane :label="$t('mandarin.choosedListing')" name="choosedListing">
            <div class="edu-opertion-bar sub-title">
              <div class="float-left">
                <el-input
                  v-model.trim="choosedQueryForm.condition.student"
                  :placeholder="$t('subjectCompetitionBase.studentIdOrName')"
                  style="width:250px"
                  @keyup.enter.native="onSubmit">
                    <i slot="suffix"
                      class="el-icon-search"
                      style="margin-top:10px;cursor:pointer"
                      @click="onSubmit">
                    </i>
                </el-input>
              </div>
              <div class="float-right" style="display: flex;">
                <el-button v-if="permitToDelete && multiChoosedListing.length > 0" type="primary" @click="deleteListing()">{{$t('common.btn.delete')}}</el-button>
              </div>
            </div>
            <self-edu-table ref="choosedTable" :pagination="false" :order='true' :tooltipEffect="tooltipEffect" stripe :data="choosedListingData" :getRowKey="getRowKey" size="mini" @selection-change="changeChoosedList">
              <edu-table-column :label="$t('subjectCompetitionBase.studentId')" prop="studentId"></edu-table-column>
              <edu-table-column :label="$t('subjectCompetitionBase.name')" prop="name"></edu-table-column>
              <edu-table-column :label="$t('subjectCompetitionBase.sex')" prop="sexI18n"></edu-table-column>
              <edu-table-column :label="$t('subjectCompetitionBase.college')" prop="facultyI18n"></edu-table-column>
              <edu-table-column :label="$t('mandarin.schoolStatus')" prop="leaveSchoolI18n"></edu-table-column>
              <edu-table-column :label="$t('mandarin.studentStatus')" prop="registrationStatusI18n"></edu-table-column>
            </self-edu-table>
            <el-row type="flex" class="row-bg" justify="end">
              <el-col>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="choosedQueryForm.pageNum_"
                  :page-sizes="[20, 40, 80, 100]"
                  :page-size="choosedQueryForm.pageSize_"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="choosedQueryForm.total_"
                  style="float:right;margin-top:10px"
                ></el-pagination>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>
<script>
  import UTILS from "common/src/utils/utils";
  import { queryDic } from "common/src/api/dictionary";
  import selfEduTable from 'common/src/views/graduateStudent/common/selfEduTable';
  import subjectCompetitionApi from 'common/src/api/subjectCompetition/subjectCompetition';
  export default {
    components: {
      'self-edu-table': selfEduTable
    },
    data () {
      return {
        auths: [],
        activeName: 'studentListing',
        permitToAdd: false,
        permitToDelete: false,
        studentQueryForm: {
          pageNum_: 1,
          pageSize_: 20,
          total_: 0,
          condition: {
            leaveSchoolList: [],
            registrationStatusList: [],
            enrolMethodsList: [],
            excludeNewestAndExchange: 1,
            gradeList: [],
            name: ''
          }
        },
        choosedQueryForm: {
          pageNum_: 1,
          pageSize_: 20,
          total_: 0,
          condition: {
            leaveSchool: '',
            registrationStatus: '',
            enrolMethods: '',
            gradeList: [],
            student: ''
          }
        },
        options: {
          leaveSchool: [],
          registrationStatus: [],
          enrolMethods: []
        },
        stuListingData: [],
        multiStuList: [],
        choosedListingData: [],
        calendarYear: '',
        multiChoosedListing: []
      }
    },
    created() {
      // 获取当前用户auths权限
      if (localStorage.getItem("sessiondata")) {
        if (JSON.parse(localStorage.getItem("sessiondata")).auths) {
          this.auths = JSON.parse(localStorage.getItem("sessiondata")).auths
        }
      }
      this.initOptions()
      subjectCompetitionApi.getCurrentDate().then(res => {
        this.options.gradeList = []
        this.studentQueryForm.condition.gradeList = [res.data.calendarYear]
        this.calendarYear = res.data.calendarYear
        res.data.calendarYearList.forEach(el =>{
          this.options.gradeList.push({
            value: el.toString(),
            label: el.toString()
          }) 
        })
      }).then(() => {
        this.onSubmit()
      })
    },
    methods: {
      async initOptions() {
        // 筛选条件字典查询
        let data = {
          lang: this.$store.getters.language || "cn",
          type: "allChild",
          keys: [
            "K_ZXZT", // 在校状态
            "G_XJZT", // 学籍状态
            "X_RXFS" // 入学方式
          ]
        }
        await queryDic(data).then(res => {
          UTILS.fillSelect(
            {
              leaveSchool: "K_ZXZT", // 在校状态
              registrationStatus: "G_XJZT", // 学籍状态
              enrolMethods: "X_RXFS" // 入学方式 
            },
            res.data,
            this.options
          )
        })
      },
      getRowKey(row) {
        return row.studentId
      },
      reset() {
        if (this.activeName === 'studentListing') {
          this.studentQueryForm.condition.leaveSchoolList = []
          this.studentQueryForm.condition.registrationStatusList = []
          this.studentQueryForm.condition.enrolMethodsList = []
          this.studentQueryForm.condition.name = ''
          this.studentQueryForm.condition.excludeNewestAndExchange = 1
          this.studentQueryForm.condition.gradeList = [this.calendarYear]
        } else {
          this.choosedQueryForm.condition.leaveSchool = ''
          this.choosedQueryForm.condition.registrationStatus = ''
          this.choosedQueryForm.condition.enrolMethods = ''
          this.choosedQueryForm.condition.student = ''
          this.choosedQueryForm.condition.gradeList = []
        }
        this.onSubmit()
      },
      // 获取学生名单数据
      getStudentsData() {
        let queryForm = JSON.parse(JSON.stringify(this.studentQueryForm))
        queryForm.condition['educationTag'] = 1
        queryForm.condition.name = queryForm.condition.name.trim()
        subjectCompetitionApi.selectStudentRoster(queryForm).then((res) => {
          this.stuListingData = res.data.list
          this.studentQueryForm.total_ = res.data.total_
        })
      },
      // 获取已选名单数据
      getChoosedData() {
        let queryForm = JSON.parse(JSON.stringify(this.choosedQueryForm))
        queryForm.condition['examCategory'] = 3
        queryForm.condition.student = queryForm.condition.student.trim()
        subjectCompetitionApi.ruleListSelectedStuList(queryForm).then(res => {
          this.choosedListingData = res.data.list
          this.choosedQueryForm.total_ = res.data.total_
        })
      },
      onSubmit() {
        if (this.activeName === 'studentListing') {
          this.studentQueryForm.pageNum_ = 1
          this.getStudentsData()
        } else {
          this.choosedQueryForm.pageNum_ = 1
          this.getChoosedData()
        }
      },
      handleClick() {
        if (this.activeName === 'studentListing') {
          this.studentQueryForm.pageNum_ = 1
          this.$refs['studentTable'].clearSelection()
          this.getStudentsData()
        } else {
          this.choosedQueryForm.pageNum_ = 1
          this.$refs['choosedTable'].clearSelection()
          this.getChoosedData()
        }
      },
      // 添加名单到已选名单
      addListing() {
        if (this.multiStuList.length === 0) {
          this.$message.warning(this.$t('subjectCompetitionBase.pleaseChoose'))
          return
        }
        let currentParams = this.multiStuList.map((value) => {
          return {
            examCategory: 3,
            studentId: value.studentId,
            idCardNo:value.idCardNo,
            idCardType:value.idCardType
          }
        })
        subjectCompetitionApi.ruleListSetAddStu(currentParams).then(res => {
          if (res.code === 200) {
            this.$message.success(this.$t('subjectCompetitionBase.addSuccessfully'))
            this.activeName = 'choosedListing'
            this.onSubmit()
          }
        })
      },
      // 删除名单
      deleteListing() {
        if (this.multiChoosedListing.length === 0) {
          this.$message.warning(this.$t('subjectCompetitionBase.pleaseChoose'))
          return
        }
        this.$delConfirm().then(_ => {
          let currentParams = this.multiChoosedListing.map(val => {
            return {
              id: val.id
            }
          })
          subjectCompetitionApi.ruleListSetDelStu(currentParams).then(res => {
            if (res.code === 200) {
              this.$message.success(this.$t('subjectCompetitionBase.deleteSuccessfullly'))
              this.$refs['choosedTable'].clearSelection()
              this.onSubmit()
            }
          })
        })
      },
      // 选择学生名单
      changeStuList(val) {
        this.multiStuList = val
      },
      // 选择已选名单
      changeChoosedList(val) {
        this.multiChoosedListing = val
      },
      // 修改每页显示条数
      handleSizeChange(val) {
        if (this.activeName === 'studentListing') {
          this.studentQueryForm.pageSize_ = val
          this.getStudentsData()
        } else {
          this.choosedQueryForm.pageSize_ = val
          this.getChoosedData()
        }
      },
      // 修改页数
      handleCurrentChange(val) {
        if (this.activeName === 'studentListing') {
          this.studentQueryForm.pageNum_ = val
          this.getStudentsData()
        } else {
          this.choosedQueryForm.pageNum_ = val
          this.getChoosedData()
        }
      }
    },
    watch: {
      auths: {
        handler(newVal) {
          if (newVal && Array.isArray(newVal) && newVal.length > 0) {
            newVal.some(item => {
              if (item.authCode === 'computer-fill-list-setting-add') {
                this.permitToAdd = true
              }
              if (item.authCode === 'computer-fill-list-setting-delete') {
                this.permitToDelete = true
              }
            })
          }
        },
        deep: true,
        immediate: true
      }
    }
  }
</script>
<style lang="scss" scoped>
  .list-setting {
    .operate-btn-container {
      border: 0;
      padding: 20px;
      margin: 0;
    }
  }
</style>